<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>12.表单组件1.html</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

</head>

<body>
    <!-- Bootstrap提供了一些表单控件样式、布局选项，以及用来创建广泛多样化的的表单的自定义组件，以下是示例和使用指南。 -->

    <div class="container">

        <form action="">
            <!-- 
            文本框定义
            外层的div样式  class="form-group"
             输入项样式    class="form-control"

            placeholder：HTML5规范定义的属性，可以在文本框中显示提示信息
            small：给提示信息的
             -->

            <div class="form-group">
                <label for="exampleInputUserName">用户名</label>
                <input type="text" class="form-control" id="exampleInputUserName" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="exampleInputPwd">密码</label>
                <input type="text" class="form-control" id="exampleInputPwd" placeholder="请输入用户名">
            </div>

            <hr>
            <!-- 
                    radio:单选框样式
                    外层的div样式   class="form-check"
                    输入项样式      class="form-check-input"
                    disabled：表示不可选状态
                    checked：默认选中
                 -->

            <div class="form-check">
                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1"
                    checked>
                <label class="form-check-label" for="exampleRadios1">
                    男
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
                <label class="form-check-label" for="exampleRadios2">
                    女
                </label>
            </div>
            <div class="form-check disabled">
                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3"
                    disabled>
                <label class="form-check-label" for="exampleRadios3">
                    其他
                </label>
            </div>

            <hr>

            <!-- 
                  checkbox：复选框
                    外层的div样式   class="form-check"
                    输入项样式      class="form-check-input"
                    disabled：表示不可选状态
                    checked：默认选中

             -->
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
                <label class="form-check-label" for="defaultCheck1">
                    打篮球
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
                <label class="form-check-label" for="defaultCheck2">
                    排球
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" checked>
                <label class="form-check-label" for="defaultCheck2">
                    乒乓球
                </label>
            </div>

            <hr>

            <!-- 
                下拉菜单：
                外层的div样式： class="form-group"
                select的样式：  class="custom-select "  会显示上下箭头
                select的样式：  class="form-control "   会显示正常的箭头
                selected：  默认选中
             -->
            <div class="form-group">
                <select class="custom-select ">
                    <option selected>Open this select menu</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>

                <select class="form-control ">
                    <option selected>请选择</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>
            </div>

            <!-- 
                文本域
                    class="form-group"
             -->

            <div class="form-group">
                <label for="exampleFormControlTextarea1">Example textarea</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
            </div>

            <hr>

            <input type="file" name="filename">

            <hr>

            <!-- 
                文件上传项
             -->
            <div class="form-group">
                <label for="exampleFormControlFile1">上传</label>
                <input type="file" class="form-control-file" id="exampleFormControlFile1">
            </div>

            <hr>

            <div class="custom-file">
                <input type="file" class="custom-file-input" id="validatedCustomFile" required>
                <label class="custom-file-label" for="validatedCustomFile">请选择文件</label>
            </div>

            <hr>

            <button type="submit" class="btn btn-primary">提交</button>

        </form>

    </div>
</body>

</html>